<template>
  <div class="nav">
    <div class="input" @click="flag=!flag">
      点击查看报告
    <transition>
      <div class="nav-w" v-if="flag">
        <div class="wrapper">
          <p class="baogao">
            抬走，下一个
          </p>

        </div>
        <router-link to="/">
          <div class="back">确   认
          </div></router-link>

      </div>
    </transition>
    </div>

  </div>

</template>
<script>
  export default {
    name: 'City',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        flag:false
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .v-enter,
  .v-leave-to{
    opacity: 0;
    transform: translateX(100px);
  }
  .v-enter-active,
  .v-leave-active{
    transition: all 0.4s ease;
  }

  .input{

    font-size: 100px;
    width: 600px;
    margin:0 auto;
  }
  *{
    margin:0;
    padding:0;
 
    text-decoration:none

  }
  .nav{
    height: 100%;
    width: 100%;
    display: inline-block;
    min-width: 600px;
  }
  .nav-w{
    height: 800px;
    width: 600px;
    margin:0 auto;

    margin-top:50px;
    margin-bottom: 50px;
    position: relative;
    box-shadow:0 0 70px #ffcf;

  }
  .wrapper{
    height: 80%;
    width:100%;

    color: black;
    text-shadow:5px 2px 6px red;

  }
  .back{
    height: 20%;
    width: 100%;
    color:#fff;
    background:#00bfff;
    font-size: 45px;
    line-height: 144px;
    text-align: center;

  }
  .baogao{
    width:1em;
    position: absolute;
    left: 43%;
    top:7%;
    font-size: 84px;
  }
</style>
